<template>
  <div>
<!--    <el-tag>学术总策划</el-tag>-->
    <table class="gridtable">
      <tr>
        <td colspan="3">
          <el-input v-model="teacher.name" placeholder="请输入老师姓名" />
        </td>
<!--        <td>教师类别:-->
<!--          <el-radio-group v-model="teacher.type" size="mini">-->
<!--            <el-radio-button label="0">主讲人</el-radio-button>-->
<!--            <el-radio-button label="1">助教</el-radio-button>-->
<!--          </el-radio-group>-->
<!--        </td>-->
        <td rowspan="5" width="20%">
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <div style="font-size: 12px;color:#CCC">
            为保证展示效果建议上传尺寸为160*160,比例为1:1,支持jpg/jpeg,png,gif格式
          </div>
        </td>
      </tr>
      <tr>
        <td><el-input v-model="teacher.technicalTitle" placeholder="请输入老师职称" /></td>
        <td><el-input v-model="teacher.schoolName" placeholder="请输入老师代表学校" /></td>
        <td><el-input v-model="teacher.intro" placeholder="请用10个字介绍老师" /></td>
      </tr>
      <tr>
        <td><el-input v-model="teacher.birthday" placeholder="请选择生日" /></td>
        <td colspan="2"><el-input v-model="teacher.technicalDirection" placeholder="学术方向" /></td>
      </tr>
      <tr>
        <td colspan="3">
          <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入老师介绍"
            v-model="teacher.description">
          </el-input>
        </td>

      </tr>
      <tr>
        <td colspan="3">
          <el-button  @click="dialogVisible = true" round>关联账号</el-button>
          <div v-if="teacher.teacherName">{{teacher.teacherName}}</div>
        </td>
      </tr>

      <tr>
        <td colspan="4">
          <el-button @click="saveSpeaker">保存</el-button>
          <el-button @click="deleteSpeaker2">删除</el-button>
        </td>
      </tr>
    </table>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="50%">
      <div style="margin-top: 15px">
        <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
          <el-form-item label="输入姓名：">
            <el-input style="width: 203px" v-model="listQuery.keyword" placeholder="教师姓名"></el-input>
          </el-form-item>
          <el-form-item label="所属学校：">
            <el-select v-model="listQuery.schoolId" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>

          </el-form-item>
        </el-form>
        <el-button
          style="float: right"
          @click="handleSearchList()"
          type="primary"
          size="small">
          查询结果
        </el-button>
      </div>
      <div class="table-container">
        <el-table
          ref="multipleTable"
          v-loading="listLoading"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"

          border>
          <el-table-column
            prop="name"
            label="教师姓名"
            width="100">
          </el-table-column>
          <el-table-column
            prop="phone"
            label="联系方式"
            width="120">
          </el-table-column>
          <el-table-column
            prop="gender"
            label="性别"
            width="80"
            :formatter="formatGender">
          </el-table-column>
          <el-table-column
            prop="schoolName"
            label="所属学院"
            width="180"
            :formatter="formatColleage"
            show-overflow-tooltip
          >
          </el-table-column>

          <el-table-column
            prop="address"
            label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="handleClickSelect(scope.row)" >选择</el-button>
<!--              <el-button type="text" size="mini" @click="handleEditTeacher(scope.$index, scope.row)" >编辑</el-button>-->
<!--              <el-button type="text" @click="handleRoles(scope.$index,scope.row)" size="mini" >设置角色</el-button>-->
<!--              <el-button type="text" size="mini" >删除</el-button>-->
<!--              <el-button type="text" size="mini" >禁用</el-button>-->
            </template>
          </el-table-column>
        </el-table>

      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import {fetchList as fetchSchoolList} from '@/api/school';
  import {fetchList , getRoleByTeacherId,updateRole} from '@/api/teacher';
  import {createTeacher,updateTeacher,deleteTeacher} from "@/api/course";

  const defaultListQuery = {
    keyword: null,
    pageNo: 1,
    schoolId:null
  };
  export default {
    name:'speaker',
    props: {
      tIndex:Number,
      teacher:{
        type: Object,
        required: true
      }
    },
    data(){
      return {
        options:[],
        tableData:[],
        listLoading: false,
        listQuery: Object.assign({}, defaultListQuery),
        dialogVisible:false,
        mainTeacherName:'',
        imageUrl: '',
        textarea:""
      }
    },
    mounted:function(){
      //alert(this.$route.query.courseName);
    },
    methods:{
      saveSpeaker:function(){
        if(this.teacher.id == 0){
          createTeacher(this.teacher).then(response=>{
            console.log(response)
            this.teacher.id = response.data.id
            this.$message('保存成功');
          });
        }else{
          updateTeacher(this.teacher).then(response=>{
            this.$message('修改成功');
          })
        }
      },
      deleteSpeaker2:function(){
        if(this.teacher.id == 0){
          //不删除数据库
          this.$emit('on-delete-teacher', this.tIndex);
        }else{
          this.$confirm('此操作将永久删除该参与老师, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            deleteTeacher(this.teacher).then(response=>{
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            })

          }).catch(() => {

          });

        }

      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      getTeacherList(){
        this.listLoading = true;
        fetchList(this.listQuery).then(response=>{
          const { data } = response;
          this.tableData = data.list;
          this.pageData = data;
          this.listLoading = false;
        }).catch(error=>{});
      },
      getSchoolList(){
        fetchSchoolList().then(response => {
          const { data } = response;

          this.options = data;
        });

      },
      formatGender(row, column){
        if(row.gender == 1){
          return "男";
        }
        if(row.gender == 2){
          return '女';
        }
        return "未知";
      },
      formatColleage(row,column){
        //console.log(row);
        if(row.schoolName != null){
          return row.schoolName+"/"+row.collegeName;
        }

      },
      handleSearchList(){
        this.listQuery.pageNo = 1;
        this.getTeacherList();

      },
      handleClickSelect(row){
        console.log(row);
        this.teacher.teacherId = row.id;
        this.dialogVisible = false;
        this.teacher.teacherName = row.teacherName;
      }
    }
  }
</script>

<style scoped>
  table{
    width: 90%;
    margin-top:10px;
  }
  table.gridtable {
    font-family: verdana,arial,sans-serif;
    font-size:14px;
    color:#333333;
    border-width: 1px;
    border-color: #CCCCCC;
    border-collapse: collapse;
  }
  table.gridtable th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #CCCCCC;
    background-color: #dedede;
  }
  table.gridtable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #CCCCCC;
    background-color: #ffffff;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
